<template>
  <div class="comment-section">
    <!-- 评论输入框 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发表评论</span>
      </div>
      <el-form :model="commentForm" label-position="top" class="comment-form">
        <el-form-item label="用户名">
          <el-input v-model="commentForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input
            v-model="commentForm.content"
            type="textarea"
            placeholder="请输入评论内容"
            rows="4"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitComment">提交评论</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 评论列表 -->
    <el-card v-if="comments.length > 0" class="box-card">
      <div slot="header" class="clearfix">
        <span>评论列表</span>
      </div>
      <div v-for="(comment, index) in paginatedComments" :key="index" class="comment-item">
        <p><strong>{{ comment.username }}:</strong> {{ comment.content }}</p>
        <p class="comment-time">{{ formatDate(comment.time) }}</p>
        <el-button size="mini" @click="openReplyBox(index)">回复</el-button>

        <!-- 回复输入框 -->
        <div v-if="showReplyIndex === index" class="reply-box">
          <el-input
            v-model="replyContent"
            placeholder="请输入回复内容"
            type="textarea"
            rows="2"
          />
          <el-button size="mini" type="primary" @click="submitReply(index)">提交回复</el-button>
          <el-button size="mini" @click="showReplyIndex = null">取消</el-button>
        </div>

        <!-- 回复列表 -->
        <div v-if="comment.replies && comment.replies.length > 0" class="reply-list">
          <p v-for="(reply, replyIndex) in comment.replies" :key="replyIndex" class="reply-item">
            <strong>{{ reply.username }} 回复:</strong> {{ reply.content }}
          </p>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="comments.length"
        @current-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentForm: {
        username: '',
        content: ''
      },
      comments: [], // 评论列表
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的评论数量
      showReplyIndex: null, // 用于标记显示回复框的评论
      replyContent: '' // 回复的内容
    }
  },
  computed: {
    paginatedComments() {
      // 获取当前页的评论
      const start = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      return this.comments.slice(start, end)
    }
  },
  methods: {
    submitComment() {
      if (this.commentForm.username && this.commentForm.content) {
        this.comments.push({
          ...this.commentForm,
          time: new Date(),
          replies: [] // 初始化为空回复
        })
        this.commentForm.username = ''
        this.commentForm.content = ''
      } else {
        this.$message.error('请填写用户名和评论内容')
      }
    },
    openReplyBox(index) {
      this.showReplyIndex = index
      this.replyContent = ''
    },
    submitReply(index) {
      if (this.replyContent) {
        this.comments[index].replies.push({
          username: '当前用户', // 可替换为实际用户
          content: this.replyContent
        })
        this.showReplyIndex = null
        this.replyContent = ''
      } else {
        this.$message.error('回复内容不能为空')
      }
    },
    formatDate(time) {
      const date = new Date(time)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
    },
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style scoped>
.comment-section {
  padding: 20px;
}

.comment-form {
  margin-bottom: 20px;
}

.comment-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.reply-box {
  margin-top: 10px;
}

.reply-list {
  margin-top: 10px;
}

.reply-item {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
</style>
